<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件使用</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <!--<table>
        &lt;!&ndash;<tbody>
            <tr is="row"></tr>
            <tr is="row"></tr>
            <tr is="row"></tr>
        </tbody>&ndash;&gt;
       &lt;!&ndash; <div
                @click="handleClick"
                ref="hello"
        >
            Hello world
        </div>&ndash;&gt;
    </table>-->
    <counter
            @change="handleChange"
            ref="one"
    >
    </counter>
    <counter
            @change="handleChange"
            ref="two"
    >
    </counter>
    <div>{{total}}</div>
</div>
<script>
   /* Vue.component("row",{
            data:function () {
                return {
                    content:"this is content"
                }
            },
            template:'<tr><td>{{content}}</td></td></tr>'
        }

    );*/
   Vue.component('counter',{
       data:function () {
           return {
               number:0
           }
       },
       template:"<div @click='handleClick'> {{ number }}</div>",
       methods:{
           handleClick:function () {
               this.number++;
               this.$emit('change')
           }
       }
   });
    var vm = new Vue({
        el:"#app",
        data:{
            total:0
        },
        methods:{
            handleClick:function () {
                // alert(this.$refs.hello.innerHTML);
            },
            handleChange:function () {
                this.total = this.$refs.one.number + this.$refs.two.number
            }
        }
    });
</script>
</body>
</html>